let cvs = document.getElementById("bg");
// 获取窗口尺寸
const width = window.innerWidth * devicePixelRatio,
  height = window.innerHeight * devicePixelRatio;

cvs.width = width;
cvs.height = height;
// 开始绘制上下文
const ctx = cvs.getContext("2d");

//字体大小
const fontSize = 15 * devicePixelRatio;
// 列宽
const columnWidth = fontSize;

// 列的数量
const columnCount = Math.floor(width / columnWidth);
// 每一列下一个是什么数字
const nextChar = new Array(columnCount).fill(0);
function draw() {
  ctx.fillStyle = "rgba(0,0,0,0.2)";
  ctx.fillRect(0, 0, width, height);
  for (let i = 0; i < columnCount; i++) {
    //字体，颜色，大小，位置
    const char = getRandomStr();
    ctx.fillStyle = getRandomColor();
    ctx.font = `${fontSize}px "Roboto Mono"`;
    const x = columnWidth * i;
    const index = nextChar[i];
    const y = (index + 1) * fontSize;
    ctx.fillText(char, x, y);
    if(y>height&&Math.random()>0.89){
      nextChar[i]=0
    }else{
      nextChar[i]++;
    }
  }
}

//获取随机颜色
function getRandomColor() {
  let color = "#";
  const letters = "0123456789ABCDEF";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
let colorstr = getRandomColor();
console.log(colorstr);
// 获取随机字符
function getRandomStr() {
  let randomNum = Math.floor(Math.random() * 256);
  let chartRandom = String.fromCharCode(randomNum);
  return chartRandom;
}
let randnuim = getRandomStr();
console.log(randnuim);

draw()
setInterval(draw,40)